<template>
  <div id="self_bartending_bartendUserDetail">
    <c-title :hide="false" text="用户详情"></c-title>
    <diyBackGround :minHeight="'5.69rem'"></diyBackGround>
    <div class="contenBox">
      <div class="contenTop" v-if="order_member">
        <img :src="order_member.avatar_image" class="contenTopImg" alt="" />
        <div class="contenTop_r">
          <div class="contenTop_r_name">{{ order_member.nickname }}</div>
          <div class="contenTop_r_mobile" v-if="order_member.mobile">{{ order_member.mobile }}</div>
          <div class="contenTop_r_time">{{ order_member.last_login_time }}</div>
        </div>
      </div>
      <van-search v-model="keyword" @search="searchPost" placeholder="搜索订单" background="#f5f5f5" shape="round">
        <template slot="left-icon">
          <i class="iconfont icon-sousuo1"></i>
        </template>
      </van-search>
      <van-tabs v-model="active_child" background="#f5f5f5" line-width="20px" @change="changeTab">
        <van-tab :title="item" v-for="(item, index) in childNavArr" :key="index"></van-tab>
      </van-tabs>
      <div style="margin-top:0.75rem;"></div>
      <bartending-order-list :orderItem="listData" :showUser="false" @updateData="updateDataMethods"></bartending-order-list>
    </div>
  </div>
</template>
<script>
import diyBackGround from "../../../components/diyBackGround.vue";
import bartendingOrderList from "../components/bartendingOrderList.vue";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      childNavArr: ["全部", "待付款", "待发货", "待收货", "已完成", "已取消", "已退款"],
      active_child: 0,
      keyword: "",
      urlStr: "",
      order_member: null,

      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  activated() {
    this.active_child = 0;
    this.keyword = "";
    this.init(); //初始化数据
    this.getData();
  },
  methods: {
    updateDataMethods() {
      //子组件操作完成更新列表数据
      this.active_child = 0;
      this.keyword = "";
      this.init(); //初始化数据
      this.getData();
    },
    init() {
      this.page = 1;
      this.total_page = 0;
      this.listData = [];
    },
    async getData() {
      let json = { member_id: this.$route.params.id, keyword: this.keyword };
      this.urlStr = "plugin.self-bartending.api.employee.order.index";
      if (this.active_child == 1) {
        this.urlStr = "plugin.self-bartending.api.employee.order.waitPay";
      } else if (this.active_child == 2) {
        this.urlStr = "plugin.self-bartending.api.employee.order.waitSend";
      } else if (this.active_child == 3) {
        this.urlStr = "plugin.self-bartending.api.employee.order.waitReceive";
      } else if (this.active_child == 4) {
        this.urlStr = "plugin.self-bartending.api.employee.order.completed";
      } else if (this.active_child == 5) {
        this.urlStr = "plugin.self-bartending.api.employee.order.canceled";
      } else if (this.active_child == 6) {
        this.urlStr = "plugin.self-bartending.api.employee.order.refunded";
      }
      let { data, msg, result } = await $http.post(this.urlStr, json, ".");
      if (result) {
        this.order_member = data.order_member;
        this.listData = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    searchPost() {
      this.init();
      this.getData();
    },
    async changeTab() {
      this.init();
      this.getData();
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = { member_id: this.$route.params.id, keyword: this.keyword, page: this.page };
        this.urlStr = "plugin.self-bartending.api.employee.order.index";
        if (this.active_child == 1) {
          this.urlStr = "plugin.self-bartending.api.employee.order.waitPay";
        } else if (this.active_child == 2) {
          this.urlStr = "plugin.self-bartending.api.employee.order.waitSend";
        } else if (this.active_child == 3) {
          this.urlStr = "plugin.self-bartending.api.employee.order.waitReceive";
        } else if (this.active_child == 4) {
          this.urlStr = "plugin.self-bartending.api.employee.order.completed";
        } else if (this.active_child == 5) {
          this.urlStr = "plugin.self-bartending.api.employee.order.canceled";
        } else if (this.active_child == 6) {
          this.urlStr = "plugin.self-bartending.api.employee.order.refunded";
        }
        let { data, msg, result } = await $http.post(this.urlStr, json, "");
        this.isLoadMore = true;
        if (result) {
          this.listData = this.listData.concat(data.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  },
  components: { diyBackGround, bartendingOrderList }
};
</script>
<style lang="scss" scoped>
#self_bartending_bartendUserDetail {
  padding-bottom: 3rem;
}
.van-search {
  padding: 0;
  margin-top: 0.63rem;
  .van-search__content {
    background: #ffffff;
  }
}
.contenBox {
  margin: 0 0.75rem;
  margin-top: -4.72rem;
  .contenTop {
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    background: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    .contenTopImg {
      flex-shrink: 0;
      width: 3.5rem;
      height: 3.5rem;
      background: #d6d6dc;
      border-radius: 2.69rem;
      border-radius: 50%;
      margin-right: 0.5rem;
    }
    .contenTop_r {
      text-align: left;
      flex: 1;
      font-size: 0.81rem;
      line-height: 0.95rem;
      .contenTop_r_name {
        font-weight: bold;
        font-size: 0.94rem;
        margin-bottom: 0.28rem;
        line-height: 1rem;
      }
      .contenTop_r_mobile {
        margin-bottom: 0.28rem;
      }
      .contenTop_r_time {
        color: #999999;
      }
    }
  }
}
</style>
